<template>
  <div class="header" v-show="getShow">
    <div class="title">专科能力评估平台</div>
    <div class="btn-list">
      <template v-for="(item, index) in hasPermissionList" :key="index">
        <div @click="router.push(item.path[0])" :class="['btn', getActive(item) ? 'active' : '']">
          {{ item.name }}
        </div>
      </template>
    </div>
    <div class="author">
      <div class="name">{{ userStore.userInfo.username }}</div>
      <Dropdown />
    </div>
  </div>
</template>

<script setup>
import Dropdown from '../../../layout/components/NavigationBar/Dropdown.vue'
import { usePermissionStore } from '@/store/modules/permission'
import { nextTick, onMounted, watch } from 'vue'
import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore()
const permissionStore = usePermissionStore()

const route = useRoute()
const router = useRouter()
const show = ref(false)
const btnList = ref([
  { name: '公开编码库', path: ['/codingLibrary'], permission: 'menu:codingLibrary' },
  { name: '数据源中心', path: ['/dataSource'], permission: 'menu:dataSource' },
  { name: '数据处理', path: ['/dataLink', '/dataAdd'], permission: 'menu:dataLink' },
  { name: '数据分析', path: ['/analysis'], permission: 'menu:analysis' },
  { name: '数据统计', path: ['/statistics', '/addStatistics', '/showStatistics'], permission: 'menu:statistics' },
  { name: '我的数据', path: ['/myData'], permission: 'menu:myData' },
  { name: '我的报告', path: ['/myReport'], permission: 'menu:myReport' },
  { name: '系统管理', path: ['/workbench'], permission: '#' }
])
const hasPermissionList = ref([])
const getActive = (item) => {
  if (item.path.includes(route.path)) {
    return true
  } else {
    return false
  }
}
watch(
  () => route.path,
  () => {
    console.log(111)

    const fullRoute = []
    btnList.value.forEach((item) => {
      item.path.forEach((p) => {
        fullRoute.push(p)
      })
    })
    const allRoute = []
    hasPermissionList.value.forEach((item) => {
      item.path.forEach((p) => {
        allRoute.push(p)
      })
    })
    if (fullRoute.includes(route.path) && !allRoute.includes(route.path)) {
      router.push(hasPermissionList.value[0].path[0])
    }
  }
)
const getShow = () => {
  const fullRoute = []
  btnList.value.forEach((item) => {
    item.path.forEach((p) => {
      fullRoute.push(p)
    })
  })
  if (fullRoute.includes(route.path)) {
    show.value = true
  } else {
    show.value = false
  }
}
watch(
  () => permissionStore.menuList,
  () => {
    console.log(permissionStore.menuList)
    hasPermissionList.value = btnList.value
      .filter((item) => {
        return permissionStore.menuList.map((item) => item.permissionChar).includes(item.permission)
      })
      .map((item) => {
        return {
          ...item,
          name: permissionStore.menuList.find((i) => i.permissionChar == item.permission).name
        }
      })
    console.log(hasPermissionList.value)
  },
  { deep: true, immediate: true }
)

onMounted(() => {
  setTimeout(() => {
    console.log(permissionStore.menuList)
  }, 1000)
})
</script>

<style lang="scss" scoped>
.header {
  position: absolute;
  width: 100%;
  background-color: #fff;
  z-index: 9;
  height: 60px;
  box-shadow: 0 0 10px #ccc;
  display: flex;
  .title {
    font-size: 20px;
    line-height: 60px;
    font-weight: 700;
    color: #178aec;
    padding-left: 20px;
  }
  .btn-list {
    padding-left: 100px;
    display: flex;
    .btn {
      padding: 0 20px;
      font-size: 20px;
      line-height: 60px;
      font-weight: 700;
      color: #888;
      cursor: pointer;
    }
    .active {
      color: #178aec;
      border-bottom: 2px solid #178aec;
    }
  }
}
.author {
  height: 60px;
  display: flex;
  align-items: center;
  // width: 100px;
  position: absolute;
  right: 20px;
  .name {
    text-shadow: none;
    font-size: 18px;
    color: var(--text-color);
  }
}
</style>
